import { NavLink } from "react-router-dom";
import { motion } from "framer-motion";

export default function Sidebar({ isOpen, toggleSidebar }: { isOpen: boolean; toggleSidebar: () => void }) {
  const menuItems = [
    { name: "班级管理", icon: "fas fa-users", path: "class" },
    { name: "学生管理", icon: "fas fa-user-graduate", path: "students" },
    { name: "成绩管理", icon: "fas fa-chart-line", path: "grades" },
  ];

  return (
    <motion.div
      initial={{ width: isOpen ? "240px" : "64px" }}
      animate={{ width: isOpen ? "240px" : "64px" }}
      transition={{ duration: 0.2 }}
      className="bg-white shadow-md overflow-hidden"
    >
      <div className="flex flex-col h-full">
        {/* 菜单项 */}
        <nav className="flex-1 pt-4">
          {menuItems.map((item) => (
            <NavLink
              key={item.path}
              to={item.path}
              className={({ isActive }) =>
                `flex items-center px-4 py-3 text-gray-700 hover:bg-gray-100 ${
                  isActive ? "bg-gray-100 border-r-4 border-[#E74C3C]" : ""
                }`
              }
            >
              <i className={`${item.icon} text-lg mr-3 w-6 text-center`}></i>
              {isOpen && <span>{item.name}</span>}
            </NavLink>
          ))}
        </nav>
        
        {/* 折叠按钮 */}
        <div className="p-4 border-t border-gray-200">
          <button
            onClick={toggleSidebar}
            className="w-full flex items-center justify-center text-gray-500 hover:text-gray-700"
          >
            <i className="fas fa-chevron-left text-lg"></i>
            {isOpen && <span className="ml-2">折叠</span>}
          </button>
        </div>
      </div>
    </motion.div>
  );
}
